<template>
  <el-container>
    <el-header>
      <h2 class="title">实时数据</h2>
    </el-header>
    <el-main>
      <!-- 日期选择器 -->
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="margin-bottom: 20px"
        @change="onDateChange"
      />

      <!-- 图表区域左右布局 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="chart-card">
            <div ref="lineChart" style="width: 100%; height: 400px" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="chart-card">
            <div ref="barChart" style="width: 100%; height: 400px" />
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { ElMessage } from "element-plus";

const dateRange = ref([new Date("2014-01-01"), new Date("2014-01-31")]);

// 创建图表实例的引用
const lineChart = ref(null);
const barChart = ref(null);

let lineChartInstance;
let barChartInstance;

const lineChartOptions = {
  title: { text: "" },
  tooltip: { trigger: "axis" },
  legend: { data: ["总数", "正常", "日新增", "故障"] },
  xAxis: {
    type: "category",
    data: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "01-07"]
  },
  yAxis: { type: "value" },
  series: [
    {
      name: "总数",
      type: "line",
      data: [8, 13, 13, 15, 16, 13, 15]
    },
    { name: "正常", type: "line", data: [6, 12, 6, 5, 13, 11, 10] },
    { name: "日新增", type: "line", data: [2, 5, 2, 3, 3, 2, 7] },
    { name: "故障", type: "line", data: [2, 1, 2, 1, 2, 2, 1] }
  ]
};

const barChartOptions = {
  title: { text: "" },
  tooltip: { trigger: "axis" },
  legend: { data: ["总数", "正常", "日新增", "故障"] },
  xAxis: {
    type: "category",
    data: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "01-07"]
  },
  yAxis: { type: "value" },
  series: [
    {
      name: "总数",
      type: "bar",
      data: [8, 14, 14, 8, 20, 11, 13],
      itemStyle: { color: "#5470c6" }
    },
    {
      name: "正常",
      type: "bar",
      data: [6, 12, 6, 5, 13, 10, 10],
      itemStyle: { color: "#91cc75" }
    },
    {
      name: "日新增",
      type: "bar",
      data: [2, 5, 2, 3, 3, 2, 7],
      itemStyle: { color: "#fac858" }
    },
    {
      name: "故障",
      type: "bar",
      data: [2, 1, 2, 1, 2, 2, 1],
      itemStyle: { color: "#ee6666" }
    }
  ]
};

const initCharts = () => {
  if (lineChart.value) {
    lineChartInstance = echarts.init(lineChart.value);
    lineChartInstance.setOption(lineChartOptions);
  }
  if (barChart.value) {
    barChartInstance = echarts.init(barChart.value);
    barChartInstance.setOption(barChartOptions);
  }
};

const onDateChange = () => {
  ElMessage.success("日期范围已更新");
  // 在此处可以根据新的日期范围更新图表数据
};

onMounted(() => {
  initCharts();
});

// 监听窗口大小变化，动态调整图表大小
window.addEventListener("resize", () => {
  if (lineChartInstance) lineChartInstance.resize();
  if (barChartInstance) barChartInstance.resize();
});
</script>

<style scoped>
.el-container {
  margin: 20px;
}
.title {
  text-align: center;
}
.chart-card {
  margin: 20px 0;
}
</style>
